// 1. 获取元素
const inp = document.querySelector('.form > .text')
const ulBox = document.querySelector('.formul')
// 2. 绑定事件
inp.oninput = function () {
  // 拿到用户输入的内容去搜索
  const text = inp.value.trim()
  // 使用 jsonp 的手段请求到数据
  // 创建一个 script 标签
  const script = document.createElement('script')
  // 设置 script 标签的 src 地址
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34443,35104,35237,35049,34584,34518,35234,34579,34606,34815,26350,35145,22159&wd=${ text }&req=2&csor=1&cb=handler&_=1637892915435`
  // 插入到页面才能发送出去
  document.body.appendChild(script)
  // 删除掉
  script.remove()
}

// 准备一个处理函数
// 注意: 这个函数一定要准备在全局
function handler(res) {
  // console.log(res);
  // 1. 判断 res 内是否有 g 这个数组
  // 如果没有, 不渲染
  if (!res.g) {
    ulBox.style.display= 'none'
    return
  }

  // 代码能执行到这里, 说明 res.g 是有数据的
  // 2. 渲染页面
  let str = ''
  res.g.forEach(item => {
    str += `
      <li>${ item.q }</li>
    `
  })
  ulBox.innerHTML = str
  ulBox.style.display = 'block'
}